<template>
  <div id="components-modal-demo-position">
    <a-modal
      centered
      :visible="true"
      title="新增申请表"
      :footer="null"
      @cancel="cancel"
      class="addForm"
    >
      <a-form-model
        ref="ruleForm"
        class="joinForm"
        v-bind="layout"
        :model="params"
        :rules="rules"
      >
        <a-form-model-item ref="name" label="表单名" prop="name">
          <a-input
            placeholder="请输入表单名，不填默认填入文件名"
            v-model="params.name"
          />
        </a-form-model-item>
        <a-form-model-item ref="userName" prop="status" label="申请表文件">
          <a-upload-dragger
            class="upload-dragger"
            name="file"
            :multiple="true"
            :action="url"
            :headers="headers"
            :file-list="fileList"
            :beforeUpload="handlerBeforeUpload"
            @change="handleChange"
          >
            <a-button class="dg-base-btn">选择申请表</a-button>
          </a-upload-dragger>
        </a-form-model-item>
      </a-form-model>

      <div class="btnClass">
        <a-button @click="cancel" class="cancel commonBtn">取消</a-button>
        <a-button type="primary" class="commonBtn" @click="confirmClick"
          >确认上传</a-button
        >
      </div>
    </a-modal>
  </div>
</template>
<script>
import { getStorage } from '@/utils/index'
const baseUrl = process.env.VUE_APP_BASE_URL
import { uploadNavBrand } from '@/api/dataNavigation'

export default {
  props: {},
  data() {
    return {
      Visible: true,
      layout: {
        labelCol: { span: 6 },
        wrapperCol: { span: 18 }
      },
      url: baseUrl + '/system/file/pop',
      headers: {}, // 请求头
      fileList: [], // 上传结果
      uploadTypeMap: ['docx', 'xlsx', 'pdf', 'zip', 'rar'], // 限制条件
      params: {
        name: '',
      },
      rules: {
        status: [
          { required: true, message: '请选择开放时间!', trigger: 'blur' }
        ],
      },
    }
  },
  created() {
    const token = `${getStorage('token', 0)}`
    this.headers = {
      Authorization: token
    }
  },
  mounted() { },
  methods: {
    handleCancel() {
      this.$emit('cancelVisible', false)
    },
    cancel() {
      this.$emit('cancel')
    },
    confirmClick() {
      if (this.fileList.length === 0) {
        this.$message.warning('请完善信息!')
        return
      }
      const params = {
        columnName: this.params.name || this.fileList[0].name,
        fileId: this.fileList[0].response.data[0].fileId,
        category: '2'
      }
      uploadNavBrand(params).then(res => {
        if (res.code === 200) {
          this.$message.success('新增成功!')
          this.$emit('addSuccess')
        } else {
          this.$message.warning(res.msg)
        }
      })
    },
    handlerBeforeUpload(file) {
      const { size } = file
      // const { size, name } = file
      // const type = name.split('.').slice(-1)
      // let isOkType = false
      if (this.fileList.length >= 1) {
        this.$apiStatusHandler(99, '附件上传不能超过1个')
        return Promise.reject()
      }
      if (size > 16777216) {
        this.$apiStatusHandler(99, '上传的附件超过2m')
        return Promise.reject()
      }
      // for (let i = 0; i < this.uploadTypeMap.length; i++) {
      //   const item = this.uploadTypeMap[i]
      //   if (type.indexOf(item) !== -1) {
      //     isOkType = true
      //     return
      //   }
      // }
      // if (!isOkType) {
      //   this.$apiStatusHandler(99, '上传的附件类型不符合要求')
      //   return Promise.reject()
      // }
    },
    handleChange(info) {
      const { fileList } = info
      this.fileList = fileList
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
